<template>
  <div>
    <div class="demo">
      <h1>{{msg}}</h1>
      <h1>学生姓名：{{name}}</h1>
      <h1>我的姓名：{{myName}}</h1>
      <h1>性别：{{sex}}</h1>
      <h1>年龄：{{age+1}}</h1>
      <h1>我的年龄：{{myAge}}</h1>

      <button @click="updateName">尝试修改姓名</button>
      <button @click="updateAge">尝试修改年龄</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: 'hello',
      myName: this.name,
      myAge: 12
    }
  },

  // props: ['name','age','sex'],简单声明接收

  //接收的同时对类型限制
  // props: {
  //   name: String,
  //
  //   sex: String,
  //
  //   age: Number
  // },

  //接收的同时对类型限制+默认值+必要性限制
  props: {
    name: {
      type: String,
      required: true
    },

    sex: {
      type: String,
      required: true
    },

    age: {
      type: Number,
      default: 99
    }
  },
  methods: {
    updateName() {
      this.myName = '我改了'
    },
    updateAge() {
      this.myAge++
    }
  },
  created() {
    console.log('vc==',this)
  }
}
</script>

<style scoped>
  .demo {
    background: orange;
  }
</style>